'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Circle = function () {
    function Circle(x, y) {
        _classCallCheck(this, Circle);

        this.x = x;
        this.y = y;
        this.r = Math.random() * 10;
        this._mx = Math.random();
        this._my = Math.random();
    }

    _createClass(Circle, [{
        key: 'drawCircle',
        value: function drawCircle(ctx) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, 360);
            ctx.closePath();
            ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
            ctx.fill();
        }
    }, {
        key: 'drawLine',
        value: function drawLine(ctx, _circle) {
            var dx = this.x - _circle.x;
            var dy = this.y - _circle.y;
            var d = Math.sqrt(dx * dx + dy * dy);
            if (d < 150) {
                var opacity = 1 - d / 150;

                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(_circle.x, _circle.y);
                ctx.closePath();
                ctx.strokeStyle = 'rgba(204, 204, 204, ' + opacity + ')';
                ctx.stroke();
            }
        }
    }, {
        key: 'move',
        value: function move(w, h) {
            this._mx = this.x < w && this.x > 0 ? this._mx : -this._mx;
            this._my = this.y < h && this.y > 0 ? this._my : -this._my;
            this.x += this._mx;
            this.y += this._my;
        }
    }, {
        key: 'moveCrash',
        value: function moveCrash(ctx, _circle) {
            var dx = this.x - _circle.x;
            var dy = this.y - _circle.y;
            var d = Math.sqrt(dx * dx + dy * dy);

            if (d < this.r + _circle.r) {
                this._mx = -this._mx;
                this._my = -this._my;
                _circle._mx = _circle._mx;
                _circle._my = -_circle._my;
            }
        }
    }]);

    return Circle;
}();

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var frameDom = document.getElementsByClassName('content')[0].getElementsByTagName('span')[0];

var w = canvas.width = canvas.offsetWidth;
var h = canvas.height = canvas.offsetHeight;
var circles = [];

var frame = 0;

function draw() {
    ctx.clearRect(0, 0, w, h);
    for (var i = 0; i < circles.length; i++) {
        circles[i].move(w, h);
        circles[i].drawCircle(ctx);

        for (var j = i + 1; j < circles.length; j++) {
            circles[i].drawLine(ctx, circles[j]);
            circles[i].moveCrash(ctx, circles[j]);
        }
    }

    frame++;

    requestAnimationFrame(draw);
}

function init(num) {
    for (var i = 0; i < num; i++) {
        circles.push(new Circle(Math.random() * w, Math.random() * h));
    }

    setInterval(function () {
        frameDom.innerHTML = frame;
        frame = 0;
    }, 1000);

    draw();
}

init(200);
